<template>
    <overallconfig :data="props.data"> 
      <template #properties>
            <el-form-item label="栅格占据的列数：">
                <el-col :span="18"><el-slider v-model="props.data.options.span" :max="24"/> </el-col>
                <el-col :span="6" style="padding-left: 12px;"> {{ props.data.options.span }}</el-col>
            </el-form-item>

            <el-form-item label="栅格左侧的间隔：">
                <el-col :span="18"><el-slider v-model="props.data.options.offset" :max="24" /> </el-col>
                <el-col :span="6" style="padding-left: 12px;"> {{ props.data.options.offset }}</el-col>
            </el-form-item>

            <el-form-item label="栅格向右移动：">
                <el-col :span="18"><el-slider v-model="props.data.options.push" :max="24" /> </el-col>
                <el-col :span="6" style="padding-left: 12px;"> {{ props.data.options.push }}</el-col>
            </el-form-item>

            <el-form-item label="栅格向左移动：">
                <el-col :span="18"><el-slider v-model="props.data.options.pull" :max="24" /> </el-col>
                <el-col :span="6" style="padding-left: 12px;"> {{ props.data.options.pull }}</el-col>
            </el-form-item>
      </template>
    </overallconfig>
</template>

<script setup>
import overallconfig from "../overallconfig.vue"

// 接收父节传入点参数
const props = defineProps({
    data: {
        type: Object,
        default: () => ({}),
    }
})
</script>